<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性完成姓名拼写</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 创建一个容器 -->
		 <div id="box">
		 	姓：<input type="text" v-model="firstName"><br/><br/>
			名：<input type="text" v-model="lastName"><br/><br/>
			全名：<span>{{fullName}}</span><br/><br/>
			全名：<span>{{fullName}}</span><br/><br/>
			全名：<span>{{fullName}}</span><br/><br/>
			全名：<span>{{fullName}}</span><br/><br/>
			全名：<span>{{fullName}}</span>
		 </div>
		 <script type="text/javascript">
		 	Vue.config.productionTip=false//阻止 vue 在启动时生成生产提示
			// 创建一个vue实例
			let vm=new Vue({
				el:'#box',
				data:{
					firstName:"张",
					lastName:"三"//1.要理解什么是计算属性，先理解什么叫属性，所谓的计算属性就是拿着已经生成的属性去加工，去生成新的属性。
				},
				methods: {
					
				},
				computed: {
					fullName:{//计算属性不可直接像配置属性那样写，必须把计算过程写出来
					//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
					//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
						get(){
							console.log('@@')
							return this.firstName+'-'+this.lastName 
						},
						//set什么时候调用? 当fullName被修改时。
						set(value){
							console.log('set',value)
							const arr = value.split('-')
							this.firstName = arr[0]
							this.lastName = arr[1]
						}
						
					}
						
						
				},
			})
		 </script>
	</body>
</html>